@import "colors";

.article-style aside p::before,
div.alert > div:first-child::before {
  top: -0.8rem;
  left: -2.3rem;
  font-size: 1.8rem;
}

.alert, div.alert > div {
  font-size: 0.75rem;
  border-radius: 0.8rem;

  p + ul,
  p + ol {
    margin-top: -0.35rem;
  }
}

// MOSAIC EXTENDED
div.alert.alert-extended {
  color: #610554;
  background-color: #fddef1;
  border-color: #ddc1d9;
  box-shadow: 0 1px 3px #d8c9d6;
  position: relative;

  .extended-icon {
    position: absolute;
    display: block;
    content: "";
    background-position: center center;
    background-size: 145%;
    width: 2.5rem;
    height: 2.5rem;
    left: 0.4rem;
    top: 47%;
    margin-top: -1.15rem;
  }
  & > div:first-child::before {
    content: none;
    display: none;
  }
}

// Learning Objectives
div.alert.alert-learning_objectives {
  color: #610554;
  background-color: #fddef1;
  border-color: #ddc1d9;
  box-shadow: 0 1px 3px #d8c9d6;

  & > div:first-child::before {
    content: '\f19d'; // graduation hat
    color: $mosaic-purple;
    font-size: 1.6rem;
    top: -0.6rem;
    left: -2.1rem;
  }

  h3 {
    font-size: 1rem;
    margin: 0.2rem 0 0.3rem;
    color: darken($mosaic-purple, 13%);
  }

  ul li {
    list-style-type: none;
    position: relative;
    margin-bottom: 0.2rem;

    &::before {
      font-family: 'Font Awesome 5 Free';
      font-weight: 900;
      font-size: 0.7rem;
      line-height: 0;
      content: '\f00c'; // check mark
      position: absolute;
      left: -1.1rem;
      top: 0.7rem;
      text-shadow: 0 1px 1px #fff, 0 0 2px rgba(0,0,0,0.1);
    }
  }
}

// TIP
div.alert.alert-tip {
  color: #395411;
  background-color: #dff3c4;
  border-color: #bee08e;
  box-shadow: 0 1px 3px #dbdcdb;

  & > div:first-child::before {
    content: '\f06a';
    color: $mosaic-green;
    text-shadow: 0 1px 1px #fff, 0 0 2px rgba(0,0,0,0.1);
  }
}

// NOTE
div.alert.alert-note,
div.alert.alert-info {
  color: #055160;
  background-color: #d3edfd;
  border-color: #a3d3f3;
  box-shadow: 0 1px 3px #d2d2d2;
  
  & > div:first-child::before {
    left: -2.2rem;
    top: -0.55rem;
    color: $mosaic-blue;
    font-size: 1.6rem;
    text-shadow: 0 1px 1px #fff, 0 0 2px rgba(0,0,0,0.1);
  }
}

// WARNING
div.alert.alert-warning {
  color: #633103;
  background-color: #ffe0c4;
  border-color: #e4c3a4;
  box-shadow: 0 1px 3px #e2d8ce;

  & > div:first-child::before {
    color: $mosaic-orange;
    font-size: 1.24rem;
    left: -2.1rem;
    text-shadow: 0 1px 1px #fff, 0 0 2px rgba(0,0,0,0.1);
  }
}
